<template>


  <el-dialog
      top="20px"
      :title="defaultValue.title"
      :lock-scroll="tableConfig.lockScroll"
      :append-to-body="tableConfig.appendToBody"
      :visible="tableConfig.show"
      @close="tableConfig.show = false"
      :show-close="tableConfig.close"
      :destroy-on-close="tableConfig.destroyOnClose"
      width="1100px">

    <el-form size="small" ref="formOpsAuthorityRef" :rules="checkRule" :model="submitData" label-width="180px">

      <el-form-item label="上级权限名称" prop="parentId">
        <el-input v-model.trim="submitData.parentName" disabled />
      </el-form-item>

      <el-form-item label="上级权限标识" prop="parentId">
        <el-input v-model.trim="submitData.parentId" disabled />
      </el-form-item>

      <el-form-item label="权限名称" prop="name">
        <el-input v-model.trim="submitData.name" />
      </el-form-item>

      <el-form-item label="权限代码" prop="code">
        <el-input v-model.trim="submitData.code" />
      </el-form-item>

      <el-form-item label="权限说明" prop="description">
        <el-input type="textarea" v-model.trim="submitData.description" />
      </el-form-item>

      <el-form-item label="权限类型" prop="type">
        <el-select v-model="submitData.type" placeholder="请选择权限类型">
          <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>


<!--      <el-form-item label="所有上级权限，不含-1" prop="parentIds">-->
<!--        <el-input v-model.trim="submitData.parentIds" />-->
<!--      </el-form-item>-->


    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button plain type="warning" @click="toSaveUpd"
                 v-if="defaultValue.saveUpdSelect !== 'select'">{{ defaultValue.title }}</el-button>
      <el-button plain type="primary" @click="tableConfig.show = false">关闭</el-button>
    </span>

  </el-dialog>


</template>

<script>

import http from '@/utils/http'
import {clearInvalid} from "@/utils/utils"

export default {
  name: "OpsAuthoritySaveUpd",
  data() {
    return {
      // 表格的默认值
      tableConfig: {
        // 关闭时销毁 Dialog 中的元素
        destroyOnClose: true,
        // 弹出框是否打开
        show: false,
        // 是否显示关闭按钮
        close: true,
        // 下面2个属性解决打开弹出框后没有在最上面显示的问题，导致看到的内容是一半的，需要先将滚动条移到最上面
        lockScroll: false,
        appendToBody: true,
      },
      // 权限类型
      typeList:[
        {id: 1, name: '菜单'},
        {id: 2, name: '按钮'},
        {id: 3, name: '页面'},
        {id: 4, name: '链接'},
        {id: 9, name: '其他'},
      ],
      // 默认值，进入页面后的值
      defaultValue: {
        // 弹出框标题
        title: '查看',
        // 保存还是修改or查看,取值有 select | save | upd
        saveUpdSelect: 'select'
      },
      // 提交的数据
      submitData:{
        id: null,
        parentName: null,
        name: null,
        description: null,
        code: null,
        parentId: null,
        parentIds: null,
        type: null,
        createTime: null,
        updateTime: null,
        updateId: null,
        createId: null,
        delType: null,
      },
      // 校验规则
      checkRule: {
        name: [{required: true, message: '请输入名称', trigger: 'blur'}],
        description: [{required: true, message: '请输入权限说明', trigger: 'blur'}],
        code: [{required: true, message: '请输入权限代码', trigger: 'blur'}],
        parentId: [{required: true, message: '请选择上级权限', trigger: 'blur'}],
        type: [{required: true, message: '请选择权限类型', trigger: 'change'}],
      },
    }
  },
  methods: {
    /**
     * 初始化操作
     * @param operateType 操作类型,保存还是修改or查看,取值有 select \ save \ upd
     * @param obj 如果是修改和查看，则是详细数据,需要赋值
     */
    init(operateType, obj){
      this.defaultValue.saveUpdSelect = operateType
      this.clearOldData()

      if (operateType === 'save'){
        // 父级名称
        this.submitData.parentName = obj.name
        this.submitData.parentId = obj.id
        this.defaultValue.title = '新增'

      } else if (operateType === 'upd'){
        this.defaultValue.title = '修改'
        // 要json处理下，否则会影响之前的值
        this.submitData = JSON.parse(JSON.stringify(obj))

      } else {
        // 可能查看
      }

      this.tableConfig.show = true
    },
    /**
     * 清理掉旧数据
     */
    clearOldData(){
      this.submitData = {
        parentName: null,
        name: null,
        description: null,
        code: null,
        parentId: null,
        parentIds: null,
        type: null,
        createTime: null,
        updateTime: null,
        updateId: null,
        createId: null,
        delType: null,
      }
    },
    /**
     * 是保存还是修改
     */
    toSaveUpd(){
      if (this.defaultValue.saveUpdSelect === 'save'){
        this.saveOpsAuthority()

      } else if (this.defaultValue.saveUpdSelect === 'upd'){
        this.updOpsAuthority()

      } else {

      }
    },
    /**
     * 保存
     */
    saveOpsAuthority(){
      http.post("/power/savePower", this.submitData).then(response => {
        let res = response.data;
        if (!res.success) {
          // 401是token过期跳转的
          if (res.code !== 401){
            this.$message.error(res.msg);
          }
          return
        }

        this.$message.success("保存成功");
        this.$emit('getPowerTree', null)
        // 关闭弹出框,继续添加
        this.tableConfig.show = false

      }).catch(error => {
        this.$message.error(error.message);
      })
    },
    /**
     * 更新
     */
    updOpsAuthority(){
      clearInvalid(this.submitData)
      http.post("/power/updPower", this.submitData).then(response => {
        let res = response.data;
        if (!res.success) {
          // 401是token过期跳转的
          if (res.code !== 401){
            this.$message.error(res.msg);
          }
          return
        }

        this.$message.success("更新成功");
        this.$emit('getPowerTree', null)
        // 关闭弹出框
        this.tableConfig.show = false

      }).catch(error => {
        this.$message.error(error.message);
      })
    },
  }
}
</script>

<style scoped>

</style>

